<template>
	<view class="box screen-all flex">
		<view class="" v-if="tts==1">
			<view class="top-bg flex">
				<image class="top-bg-image" src="../../static/user_bg.png"></image>
				<view class="top-content flex">
					<view class="nav-view flex row aCenter">
						<view class="nav-left flex center" @click="goBack">
							<image class="nav-left-icon" src="../../static/left.png"></image>
						</view>
						<view class="flex-1 flex center">
							<text class="nav-title">会员中心</text>
						</view>
						<view class="nav-left flex center">
							
						</view>
					</view>
					<view class="user-info-view flex row aCenter">
						<image class="head-icon" :src="userInfo ? userInfo.avatar : ''"></image>
						<text class="head-text">{{userInfo ? userInfo.nickname : ''}}</text>
					</view>
					<view class="user-table-view flex row center">
						<view class="user-table flex-1 flex center">
							<text class="ut-price">{{userInfo ? userInfo.money : ''}}</text>
							<text class="ut-hint">我的余额</text>
						</view>
						<view class="user-table-border"></view>
						<view class="user-table flex-1 flex center">
							<text class="ut-price">{{userInfo ? userInfo.score : ''}}</text>
							<text class="ut-hint">我的积分</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 桌位预定 -->
			<view class="reserve-btn-view flex center">
				<image class="reserve-btn" src="../../static/yuding.png" @click="goReserve()"></image>
			</view>
			<!-- 其他服务 -->
			<view class="user-title-view flex row aCenter">
				<view class="user-title-left"></view>
				<text class="user-title">其他服务</text>
			</view>
			<view class="item-view flex">
				<view class="flex row">
					<view class="item-box flex-1 flex center" @click="onItemClick(1)">
						<image class="item-icon" src="../../static/chongzhi.png"></image>
						<text class="item-text">余额充值</text>
					</view>
					<view class="item-box flex-1 flex center" @click="onItemClick(2)">
						<image class="item-icon" src="../../static/yuemingxi.png"></image>
						<text class="item-text">余额明细</text>
					</view>
					<view class="item-box flex-1 flex center" @click="onItemClick(3)">
						<image class="item-icon" src="../../static/cunjiu.png"></image>
						<text class="item-text">存酒券</text>
					</view>
				</view>
				<view class="flex row">
					<view class="item-box flex-1 flex center" @click="onItemClick(4)">
						<image class="item-icon" src="../../static/youhuiquan.png"></image>
						<text class="item-text">优惠券</text>
					</view>
					<view class="item-box flex-1 flex center" @click="onItemClick(5)">
						<image class="item-icon" src="../../static/dingdan.png"></image>
						<text class="item-text">我的订单</text>
					</view>
					<view class="item-box flex-1 flex center" @click="onItemClick(6)">
						<image class="item-icon" src="../../static/jifen.png"></image>
						<text class="item-text">积分明细</text>
					</view>
				</view>
			</view>
			
			<uni-popup ref="popup" type="center">
				<view class="flex center">
					<view class="bg-view-box flex" @click="openScan">
						<image class="bg-view flex" src="../../static/scan_page.png"></image>
						<image class="btn-view" src="../../static/scan_btn.png"></image>
					</view>
				</view>
			</uni-popup>
		</view>
		<view class="tjj_er" v-if="tts==0">
			<image src="../../static/kong.png" mode="widthFix" class="tjj_yi"></image>
			<view>账号已被限制，请联系管理员处理</view>
		</view>
	</view>
</template>

<script>
	import wxUtil from '../../xlblib/wechat/wx-util.js';
	import XUtil from '../../common/xlb-util.js';
	export default {
		data() {
			return {
				userInfo: {},
				tts:1,
				userAgent: 'wechat', //wechat alipay web
			}
		},
		onLoad() {
			this.getUserInfo();
			
			if(XUtil.getUserAgent()){
				//获取当前端口是什么
				this.userAgent = XUtil.getUserAgent();
			}
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			goBack () {
				uni.navigateBack();
			},
			goReserve () {
				//前往预定页面
				uni.navigateTo({
					url: './reserve?type=1',
				})
			},
			getUserInfo () {
				// api/user/user_message
				let params = {
					token: uni.getStorageSync("token"),
				}
				console.log(params);
				this.$request("api/user/user_message", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(code == 1){
							this.userInfo = data;
						}else{
							this.tts=0
						}
					}).catch((e) => {
						console.log(e);
					});
			},
			onItemClick (type) {
				switch (type) {
					case 1:
						// uni.navigateTo({url:"./recharge"});
						this.openScanUi();
						break;
					case 2:
						uni.navigateTo({url:"./balance"});
						break;
					case 3:
						uni.navigateTo({url:"./store-wine-list"});
						break;
					case 4:
						uni.navigateTo({url:"./coupon"});
						break;
					case 5:
						uni.navigateTo({url:"./order"});
						break;
					case 6:
						uni.navigateTo({url:"./integral"});
						break;
				}
			},
			openScanUi () {
				this.$refs.popup.open();
			},
			
			openScan () {
				this.$refs.popup.close();
				let that = this;
				
				if(this.userAgent == 'wechat'){
					wxUtil.use().then(()=>{
						console.log(wxUtil.jweixin);
						wxUtil.jweixin.scanQRCode({
							needResult: 1,
							scanType: ["qrCode"],
							success: function (res) {
								var result = res.resultStr;
								console.log(result);
								//解析数据问题
								if(result.indexOf('=') != -1){
									let _params = result.split('=');
									if(_params.length == 2){
										let _paramList = _params[1].split('_');
										if(_paramList.length == 3){
											let invite_code = _paramList[2];
											// uni.showToast({ title: invite_code, icon: 'none',duration:2000 });
											//缓存桌位号
											uni.setStorageSync("invite_code", invite_code);
											that.bindInviteCode(invite_code);
											// that.useStoreWine(invite_code);
										}else{uni.showToast({ title: '请扫描正确的二维码！', icon: 'none',duration:2000 })}
									}else{uni.showToast({ title: '请扫描正确的二维码！', icon: 'none',duration:2000 })}
								}else{uni.showToast({ title: '请扫描正确的二维码！', icon: 'none',duration:2000 })}
							}
						})
					});
				}else{
					ap.scan({
						type: 'qr'
					}, function (res) {
						if (res.error == 10) {
							// 错误码为10：用户取消操作
							// ...
						} else if (res.error == 11) {
							// 错误码为11：扫码失败
							alert('网络开小差了...');
							// ....
						} else {
							console.log(res.code);
							
							var result = res.code;
							//解析数据问题
							if(result.indexOf('=') != -1){
								let _params = result.split('=');
								if(_params.length == 2){
									let _paramList = _params[1].split('_');
									if(_paramList.length == 3){
										let invite_code = _paramList[2];
										// uni.showToast({ title: invite_code, icon: 'none',duration:2000 });
										//缓存桌位号
										uni.setStorageSync("invite_code", invite_code);
										that.bindInviteCode(invite_code);
										// that.useStoreWine(invite_code);
									}else{uni.showToast({ title: '请扫描正确的二维码！', icon: 'none',duration:2000 })}
								}else{uni.showToast({ title: '请扫描正确的二维码！', icon: 'none',duration:2000 })}
							}else{uni.showToast({ title: '请扫描正确的二维码！', icon: 'none',duration:2000 })}
						}
					});
				}
			},
			bindInviteCode (invite_code) {
				let params = {
					token: uni.getStorageSync("token"),
					invite_code: invite_code,
				}
				console.log(params);
				this.$request("api/user/ceshi", params)
					.then(({ code, msg, data, time }) => {
						console.log('测试绑定桌位号=', code, msg, data);
						if(code == 1){
							//前往充值页面
							uni.navigateTo({url:"./recharge"});
						}else{
							uni.showToast({ title: msg, icon: 'none',duration:2000 })
						}
					}).catch((e) => {
						uni.showToast({ title: '绑定桌位码失败', icon: 'none',duration:2000 })
						console.log(e);
					});
			},
		}
	}
</script>

<style scoped>
	.tjj_er{
		width: 100%;
		height: 100vh;
		background-color: #fff;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #959595;
	}
	.tjj_yi{
		width: 300rpx;
		margin-top: 240rpx;
		max-height: 300rpx;
	}
	.box {
		background-color: #010B24;
	}
	.top-bg {
		width: 100%;
		height: 485rpx;
		position: relative;
	}
	.top-bg-image {
		width: 100%;
		height: 485rpx;
		position: absolute;
	}
	.top-content {
		width: 100%;
		position: absolute;
	}
	.nav-view {
		width: 100%;
		height: 100rpx;
	}
	.nav-left {
		width: 100rpx;
		height: 100rpx;
	}
	.nav-left-icon {
		width: 40rpx;
		height: 40rpx;
	}
	.nav-title {
		font-size: 30rpx;
		color: #FFF;
	}
	.user-info-view {
		margin-top: 47rpx;
		margin-bottom: 20rpx;
	}
	.head-icon {
		width: 98rpx;
		height: 98rpx;
		border-radius: 50rpx;
		margin-left: 46rpx;
		margin-right: 30rpx;
	}
	.head-text {
		font-size: 30rpx;
		color: #FFF;
	}
	.user-table-view {
		width: 100%;
		height: 150rpx;
		padding: 0 36rpx;
	}
	.user-table {
		flex: 1;
	}
	.user-table-border {
		width: 1rpx;
		height: 60rpx;
		background-color: #FFFFFF;
	}
	.ut-price {
		font-size: 32rpx;
		color: #FFF;
	}
	.ut-hint {
		font-size: 26rpx;
		color: #FFF;
		margin-top: 10rpx;
	}
	.reserve-btn-view {
		width: 100%;
	}
	.reserve-btn {
		width: 690rpx;
		height: 92rpx;
		margin-top: -50rpx;
	}
	.user-title-view {
		width: 100%;
		padding: 20rpx 36rpx;
	}
	.user-title-left {
		width: 4rpx;
		height: 26rpx;
		background-color: #FFF;
	}
	.user-title {
		font-size: 30rpx;
		color: #FFF;
		margin-left: 12rpx;
	}
	.item-view {
		width: 700rpx;
		background-color: #121C33;
		border-radius: 20rpx;
		margin-left: 25rpx;
	}
	.item-box {
		padding: 36rpx 0;
	}
	.item-icon {
		width: 50rpx;
		height: 50rpx;
	}
	.item-text {
		font-size: 28rpx;
		color: #FFFFFF88;
		margin-top: 12rpx;
	}
	
	/* pop */
	.bg-view-box {
		width: 634rpx;
		height: 751rpx;
		position: relative;
	}
	.bg-view {
		width: 634rpx;
		height: 751rpx;
		position: absolute;
		top: 0;
	}
	.btn-view {
		width: 263rpx;
		height: 73rpx;
		position: absolute;
		left: 189rpx;
		bottom: 156rpx;
	}
</style>
